import React from 'react';

import Cropper from 'react-cropper';

import classnames from 'classnames';
import {Spin} from 'antd';
//component

import ReIcon from 'components/widgets/ReIcon';
import ReTextField from 'components/widgets/ReTextField';


import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };

    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            radio: null,
            x: 1,
            y: 1,
            width: '',
            height: '',
        };
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    changeRadio(e, radio) {
        e.preventDefault();
        this.setState({radio});
    }

    rotateImage(label) {
        const cropper = this.refs.cropper;
        const {x, y} = this.state;

        if (label === $$.LN.ROTATE_TO_LEFT) {
            cropper.rotate(-90);
        }
        if (label === $$.LN.ROTATE_TO_RIGHT) {
            cropper.rotate(90);
        }
        if (label === $$.LN.VERTICAL_ROTATE) {
            cropper.scaleY(-1 * y);
            this.setState({y: -y});
        }
        if (label === $$.LN.HORIZONTAL_ROTATE) {
            cropper.scaleX(-1 * x);
            this.setState({x: -x});

        }
    }

    widthChange(v) {
        const {radio} = this.state;
        if (radio) {
            this.setState({width: v ? v : '', height: v ? (v / radio) : ''});
        } else {
            this.setState({width: v});
        }
    }

    heightChange(v) {
        const {radio} = this.state;
        if (radio) {
            this.setState({height: v ? v : '', width: v ? (v * radio) : ''});
        } else {
            this.setState({height: v ? v : ''});
        }
    }

    widthBlur() {
        const {radio, width, height} = this.state;
        if (radio) {
            this.refs.cropper.setData({
                'height': height,
                'width': width
            });
        } else {
            this.refs.cropper.setData({
                'width': parseFloat(width)
            });
        }
    }

    heightBlur() {
        const {radio, width, height} = this.state;
        if (radio) {
            this.refs.cropper.setData({
                'height': height,
                'width': width
            });
        } else {
            this.refs.cropper.setData({
                'height': parseFloat(height)
            });
        }
    }


    _crop(e) {
        this.setState({width: e.detail.width.toFixed(2) || '', height: e.detail.height.toFixed(2) || ''});
    }

    render() {
        const {radio, width, height} = this.state;
        const radioList = [
            {icon: 'free', label: $$.LN.FREE, radio: null},
            {icon: '_1', label: '1:1', radio: 1},
            {icon: '_', label: '2:3', radio: 2 / 3},
            {icon: '_4', label: '3:2', radio: 3 / 2},
            {icon: '_5', label: '3:4', radio: 3 / 4},
            {icon: '_2', label: '4:3', radio: 4 / 3},
            {icon: '_6', label: '16:9', radio: 16 / 9},
            {icon: '_3', label: '9:16', radio: 9 / 16}
        ];

        const rotateList = [
            {icon: 'rotate', label: $$.LN.ROTATE_TO_LEFT},
            {icon: 'rotation', label: $$.LN.ROTATE_TO_RIGHT},
            {icon: 'vertical_flip', label: $$.LN.VERTICAL_ROTATE},
            {icon: 'horizontal_flip', label: $$.LN.HORIZONTAL_ROTATE}
        ];

        let propsRadio = this.props.imageRadio ? this.props.imageRadio : (this.props.uploadAvatar || this.props.uploadCover || this.props.uploadVideoCover ? 1 / 1 : radio);
        let style = propsRadio ? {
            height: 200 / propsRadio,
            width: 200
        } : {};

        const classNames = classnames({
            'orin-w-imageeditor-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        const {uploadAvatar, uploadCover, uploadVideoCover, uploadUserCover, isLoading} = this.props;
        //uploadAvatar  头像
        //uploadCover   画展封面
        //uploadVideoCover  视频封面
        //uploadUserCover  用户公开页封面

        return (
            <div className={classNames}>
                <div ref="cropperWrapper" className={uploadAvatar ? 'crop-wrapper avatar' : 'crop-wrapper'}>
                    {
                        this.props.image && !isLoading &&
                        <Cropper
                            ref="cropper"
                            src={this.props.image}
                            style={{height: '100%', width: '100%', position: 'absolute', zIndex: 2}}
                            aspectRatio={propsRadio}
                            checkCrossOrigin={false}
                            checkOrientation={false}
                            zoomable={false}
                            // scalable={false}
                            background={false}
                            moveable={false}
                            preview=".img-preview"
                            viewMode={2}
                            dragMode="none"
                            crop={(e) => this._crop(e)}/>
                    }
                    {
                        isLoading &&
                        <div className="image-load-before">
                            <Spin spinning={true} size="large"/>
                        </div>
                    }
                </div>
                {
                    uploadAvatar &&
                    <div className="preview">
                        <div className="img-preview avatar-preview">
                        </div>
                        <p className="text-preview">{$$.LN.AVATAR_PREVIEW}</p>
                    </div>
                }
                {
                    ( uploadCover || uploadVideoCover || uploadUserCover) &&
                    <div className="preview" style={style}>
                        <div className="img-preview cover-preview" style={style}>
                        </div>
                        {
                            this.props.uploadUserCover &&
                            <div className="nick-name-wrapper">
                                <p className="text">昵称</p>
                            </div>
                        }
                        {
                            !uploadUserCover && !uploadAvatar &&
                            <p className="cover-name">{uploadVideoCover ? '视频名称' : $$.LN.EXHIBITION_NAME}</p>
                        }
                        {
                            !uploadUserCover &&
                            <p className="text-preview">{'封面预览'}</p>
                        }

                    </div>
                }
                {(!this.props.uploadAvatar && !this.props.uploadCover && !this.props.uploadVideoCover && !this.props.uploadUserCover) &&
                <div className="info-wrapper">
                    <div className="item-info radio">
                        <p className="info-title">{$$.LN.RADIO}</p>
                        <div className="radio-list">
                            {
                                radioList.map((item, index) => {
                                    return (
                                        <div key={index} onClick={(e) => this.changeRadio(e, item.radio)}
                                             className={radio === item.radio ? 'radio active' : 'radio'}>
                                            <ReIcon icon={item.icon}/>
                                            <p>{item.label}</p>
                                        </div>
                                    )
                                })
                            }
                            <div className="clear-float"></div>
                        </div>
                    </div>
                    <div className="item-info px">
                        <p className="info-title">{$$.LN.PX}</p>
                        <div className="size-list">
                            <ReTextField
                                label="W:"
                                isLabel={true}
                                labelClassName="label-class"
                                notfullWidth={false}
                                type="number"
                                className="width-input"
                                value={width}
                                onChange={(e, v) => this.widthChange(v)}
                                onBlur={(e, v) => this.widthBlur()}/>


                            <ReTextField
                                label="H:"
                                isLabel={true}
                                labelClassName="label-class"
                                notfullWidth={false}
                                type="number"
                                className="width-input"
                                value={height}
                                onChange={(e, v) => this.heightChange(v)}
                                onBlur={(e, v) => this.heightBlur()}/>
                        </div>
                    </div>
                    <div className="item-info ra">
                        <p className="info-title">{$$.LN.ROTATE}</p>
                        <div className="rotate-list">
                            {
                                rotateList.map((item, index) => {
                                    return (
                                        <div key={index} onClick={() => this.rotateImage(item.label)}
                                             className="rotate">
                                            <ReIcon icon={item.icon}/>
                                            <p className="label-desc">
                                                {item.label}
                                            </p>
                                        </div>
                                    )
                                })
                            }
                            <div className="clear-float"></div>
                        </div>
                    </div>
                </div>
                }
            </div>
        );
    }
}
